<template>
<div class="main">
    <ul>
        <li v-for="post in res" :key="post.id">
            <h3>
                <router-link to="/paga">
                    {{ post.title }}
                </router-link>
                <p><img :src="post.pic" alt="" /></p>
            </h3>
            <p>
                作者:{{ post.author }}

                发表于:{{ post.time }}
                <span class="float-right">
                    <router-link to="">
                        查看原文
                        <i class="el-icon-d-arrow-right"></i>
                    </router-link>
                </span>
            </p>
        </li>
    </ul>
    
    <el-pagination
  background
  layout="prev, pager, next"
  :total="50">
</el-pagination>
</div>
</template>

<script>
 let resData = [{
     "id":"1",
     "title":"PHP学科:MySQL手册免费分享",
     "author":"博学谷",
     "time":"05-31 14:50:07",
     "des":"文章描述",
     "pic":""
 },
 {
     "id":"2",
     "title":"前端必学框架Bootstrap,3天带你从入门到精通,免费分享",
     "author":"博学谷",
     "time":"05-31 14:50:07",
     "des":"文章描述",
     "pic":""
 },
 {
     "id":"3",
     "title":"想少走弯路,就看看这个贴:PHPer职业发展规划与技能需求！",
     "author":"博学谷",
     "time":"05-31 14:50:07",
     "des":"文章描述",
     "pic":""
 },
 {
     "id":"4",
     "title":"PHP进阶:要想提高PHP的编程效率,你必须知道的49个要点",
     "author":"博学谷",
     "time":"05-31 14:50:07",
     "des":"文章描述",
     "pic":""
 },
  {
     "id":"4",
     "title":"最涨薪PHP项目——PHP微信公众平台开发",
     "author":"博学谷",
     "time":"05-31 14:50:07",
     "des":"文章描述",
     pic: require("./imgs/pinglun1.png"),
 },
 ]
 export default {
     data(){
         return {
             res: resData,
             detected:'4'
         }
     }
 };
</script>

<style scoped>
.main{
    background: #fff;
}
li{
    list-style: none;
    border-bottom:1px solid rgb(180, 179, 179) ;
}
.float-right {
    float: right;
}
a{
    color: #000;
    text-decoration: none;
}
.el-pagination{
    text-align: center !important;
}
</style>